<!--  -->
<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <div class="bg-title"></div>
      <p class="right">可预约总量 <span class="text-orange-500">{{ num }}</span> 人</p>
    </div>
    <div class="number">
      <span class="people" v-for="(item, index) in people" :key="index">{{ item }}</span>
    </div>
    <div class="charts" ref="charts"></div>



  </div>
</template>

<script setup lang="ts">
//引入水球图相关依赖

import * as echarts from 'echarts/core';
import 'echarts-liquidfill'
import { ref,onMounted } from 'vue'



const num = ref<number>(999999)
//获取节点
const charts=ref()
onMounted(()=>{
  let mycharts=echarts.init(charts.value)

  // mycharts.setOption({
  //   series: [{
  //       type: 'liquidFill',//系列类型
  //       waveAnimation: true,//动画效果是否开启
  //       animationDuration: 0,
  //       animationDurationUpdate: 0,
  //       data: [0.6, 0.5, 0.4, 0.3],
  //       redius:'100%',//半径
  //       outline: {
  //       show: true,
  //       borderDistance: 8,
  //       itemStyle: {
  //           color: 'none',
  //           borderColor: '#31D8D5',
  //           borderWidth: 3,
  //           shadowBlur: 20,
  //           shadowColor: 'rgba(0, 0, 0, 0.25)'
  //       }
  //   },
  //   }],
    
  // })

  mycharts.setOption({
    title: [
      {
        text: "100%",
        left: "49%",
        top: "35%",
        textAlign: "center",
        textStyle: {
          fontSize: "14",
          fontWeight: "normal",
          color: "#ffffff",
          align: "center",
          textBorderColor: "rgba(0, 0, 0, 0)",
          textShadowColor: "#000",
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 1
        }
      },
      {
        text: "预约量",
        left: "49%",
        top: "25%",
        textAlign: "center",
        textStyle: {
          fontSize: "15",
          fontWeight: "normal",
          color: "#ffffff",
          align: "center",
          textBorderColor: "rgba(0, 0, 0, 0)",
          textShadowColor: "#000",
          textShadowBlur: 0,
          textShadowOffsetX: 0,
          textShadowOffsetY: 1
        }
      }
    ],
    grid: {
      top: "0",
      left: "0px",
      right: "0px",
      bottom: "0",
      containLabel: true
    },
    polar: {
      radius: ["75%", "85%"],
      center: ["50%", "50%"]
    },
    angleAxis: {
      max: 120,
      clockwise: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      },
      startAngle: 188
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    series: [
      {
        type: "liquidFill",
        radius: "60%",
        z: 2,
        center: ["50%", "50%"],
        data: [0.4, 0.4, 0.4], // data个数代表波浪数
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#35FAB6" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(40, 209, 247,0.3)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        },
        outline: {
          borderDistance: 0,
          itemStyle: {
            borderWidth: 2,
            borderColor: "#31d8d5",
            shadowBlur: 20,
            shadowColor: "#50c1a7"
          }
        },
        label: {
          show: false
        },
        backgroundStyle: {
          borderWidth: 1,
          // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
          color: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "#0D2648" // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "#0D2648" // 100% 处的颜色
              },
              {
                offset: 1,
                color: "#228E7D" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      {
        type: "pie",
        radius: ["80%", "80%"],
        center: ["50%", "50%"],
        z: 1,
        label: {
          show: false
        },
        silent: true,
        itemStyle: {
          borderWidth: 2,
          borderType: [8, 10],
          borderDashOffset: 15,
          borderColor: "#31d8d5",
          color: "#11144e",
          borderCap: "round"
        },
        data: [100]
      },
      {
        type: "bar",
        data: [55],
        z: 10,
        coordinateSystem: "polar",
        roundCap: true,
        color: "#31d8d5"
      }
    ]
  });
})
const people = ref<any>([
  2, 1, 6, 9, 0, 8, '人'
])
</script>

<style lang="scss" scoped>
.box {
  width: 391px;
  height: 321px;
  background: url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size: 100% 100%;
  .top {
    .title {
      color: #ffffff;
      font-size: 16px;
      font-style: italic;
    }

    .bg-title {
      width: 68px;
      height: 7px;
      margin-top: 10px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
    }

    .right {
      float: right;
      color: aliceblue;
      font-size: 14px;
    }
  }

  .number {
    display: flex;
    margin-top: 50px;
    padding: 0px 15px;

    .people {
      flex: 1;
      display: inline-block;
      height: 45px;
      width: 40px;
      line-height: 45px;
      font-size: 24px;
      color: #66FFFF;
      text-align: center;
      margin-right: 1px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
    }
  }
  .charts{
    width: 100%;
        height: 230px;
  }

}
</style>
